<template>
  <div class="container">
    <h2 class="text-center mt-5">店铺信息展示</h2>
    <el-row :gutter="20">
      <!-- 左边：按钮 -->
      <el-col :span="6">
        <div class="info-box">
          <div class="info-item text-center mt-4">
            <el-button type="primary" @click="openEditBasicInfoDialog">修改基本信息</el-button>
          </div>
          <div class="info-item text-center mt-4">
            <el-button type="primary" @click="openEditTimeDialog">修改营业时间</el-button>
          </div>
          <div class="info-item text-center mt-4">
            <el-button type="primary" @click="openEditAnnouncementDialog">修改公告</el-button>
          </div>
        </div>
      </el-col>
      <!-- 右边：商铺基本信息和运营时间、公告 -->
      <el-col :span="18">
        <div class="info-box">
          <h3>商铺基本信息</h3>
          <div class="info-item">
            <label>店铺名称:</label>
            <span>{{ storeInfo.storeName }}</span>
          </div>
          <div class="info-item">
            <label>店主:</label>
            <span>{{ storeInfo.userName }}</span>
          </div>
          <div class="info-item">
            <label>订餐电话:</label>
            <span>{{ storeInfo.phone }}</span>
          </div>
          <div class="info-item">
            <label>商户评分:</label>
            <span><el-rate v-model="storeInfo.storeScore " size="small" disabled /></span>
          </div>
          <div class="info-item">
            <label>营业执照:</label>
            <el-image
                style="width: 100px; height: 100px"
                :src="storeInfo.license"
                :preview-src-list="[storeInfo.license]"
                fit="cover"
            />
          </div>
          <div class="info-item">
            <label>卫生许可证:</label>
            <el-image
                style="width: 100px; height: 100px"
                :src="storeInfo.permit"
                :preview-src-list="[storeInfo.permit]"
                fit="cover"
            />
          </div>
        </div>
        <div class="info-box mt-4">
          <h3>商铺运营时间</h3>
          <div class="info-item">
            <label>开始时间:</label>
            <span>{{ storeInfo.storeStartTime }}</span>
          </div>
          <div class="info-item">
            <label>结束时间:</label>
            <span>{{ storeInfo.storeEndTime }}</span>
          </div>
        </div>
        <div class="info-box mt-4">
          <h3>商铺公告</h3>
          <div class="info-item">
            <p>{{ storeInfo.affiche }}</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 修改基本信息模态框 -->
    <el-dialog
        v-model="editBasicInfoDialogVisible"
        title="修改基本信息"
        width="1000px"
        :before-close="handleClose"
    >
      <el-card>
        <el-row>
          <el-col style="margin-top: 20px;" :span="6" :offset="8">
            <h1>商铺名称:</h1><el-input v-model="updateStoreInfo.storeName"></el-input>
          </el-col>
          <el-col style="margin-top: 20px;" :span="6" :offset="8">
            <h1>商铺简介：</h1>
            <el-input v-model="updateStoreInfo.storeIntro"></el-input>
          </el-col>
          <el-col style="margin-top: 20px;" :span="6" :offset="8">
            <h1>商铺电话：</h1>
            <el-input v-model="updateStoreInfo.phone"></el-input>
          </el-col>
          <el-col style="margin-top: 20px;" :span="12">
            <h3>营业执照更新：</h3>
            <el-upload
                action=""
                :on-change="handlePermitChange"
                :auto-upload="false"
                :show-file-list="true"
            >
            </el-upload>
          </el-col>
          <el-col style="margin-top: 20px;" :span="12">
            <h3>卫生许可更新：</h3>
            <el-upload
                :on-change="handleLicenseChange"
                :auto-upload="false"
                :show-file-list="true"
            >
            </el-upload>
          </el-col>
          <el-col style="margin-top: 20px;" >
            <el-button type="primary" @click="submitEditBasicInfoForm" style="width: 100px">提交</el-button>
            <el-button type="primary" @click="editBasicInfoDialogVisible =false;this.permitFile = null;this.licenseFile = null;this.licenseFileList=[];this.permitFileList=[]" style="width: 100px">取消</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-dialog>

    <!-- 修改营业时间模态框 -->
    <el-dialog
        v-model="editTimeDialogVisible"
        title="修改营业时间"
        width="500px"
    >
      <el-form :model="editTimeForm" label-width="100px" :rules="editTimeRules" ref="editTimeForm">
        <el-form-item label="开始时间" prop="storeStartTime">
          <el-time-picker
              v-model="editTimeForm.storeStartTime"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              placeholder="选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="storeEndTime">
          <el-time-picker
              v-model="editTimeForm.storeEndTime"
              format="HH:mm:ss"
              value-format="HH:mm:ss"
              placeholder="选择结束时间"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="width: 300px">
          <el-button @click="editTimeDialogVisible = false" style="width: 100px">取消</el-button>
          <el-button type="primary" @click="submitEditTimeForm" style="width: 100px">提交</el-button>
        </div>

      </template>
    </el-dialog>

    <!-- 修改公告模态框 -->
    <el-dialog
        v-model="editAnnouncementDialogVisible"
        title="修改公告"
        width="500px"
    >
      <el-form :model="editAnnouncementForm" label-width="100px" :rules="editAnnouncementRules" ref="editAnnouncementForm">
        <el-form-item label="公告内容" prop="affiche">
          <el-input
              type="textarea"
              v-model="editAnnouncementForm.affiche"
              placeholder="请输入公告内容"
              :rows="5"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div style="width: 300px">
          <el-button @click="editAnnouncementDialogVisible = false" style="width: 100px">取消</el-button>
          <el-button type="primary" @click="submitEditAnnouncementForm" style="width: 100px">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage, ElMessageBox } from 'element-plus';

export default {
  data() {
    return {
      storeInfo: {},
      editBasicInfoDialogVisible: false,
      editTimeDialogVisible: false,
      editAnnouncementDialogVisible: false,
      editLicenseDialogVisible: false,
      updateStoreInfo: {
        storeName: '',
        phone: '',
        storeIntro: ''
      },
      licenseFile:null,
      permitFile:null,

      editTimeForm: {
        storeStartTime: '',
        storeEndTime: ''
      },
      editAnnouncementForm: {
        affiche: ''
      },
      licenseFileList: [],
      permitFileList: [],
      editInfoRules: {
        storeName: [{ required: true, message: '请输入商铺名称', trigger: 'blur' }],
        storeIntro: [{ required: true, message: '请输入商铺简介', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入订餐电话', trigger: 'blur' }]
      },
      editTimeRules: {
        storeStartTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        storeEndTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
      },
      editAnnouncementRules: {
        affiche: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
      }
    };
  },
  methods: {
    getStoreInfo() {
      axios.get("/meals/store/selectStoreByUserId", {
        params: {
          userId: JSON.parse(localStorage.getItem("userId"))
        }
      }).then(res => {
        this.storeInfo = res.data.data;
      });
    },
    openEditBasicInfoDialog() {
      this.updateStoreInfo = { ...this.storeInfo };
      this.editBasicInfoDialogVisible = true;
    },
    openEditTimeDialog() {
      this.editTimeForm = { ...this.storeInfo };
      this.editTimeDialogVisible = true;
    },
    openEditAnnouncementDialog() {
      // this.editAnnouncementForm = { ...this.storeInfo };
      this.editAnnouncementDialogVisible = true;
    },
    openEditLicenseDialog() {
      this.editLicenseForm = { ...this.storeInfo };
      this.licenseFileList = [];
      this.permitFileList = [];
      this.editLicenseDialogVisible = true;
    },
    submitEditBasicInfoForm() {
          const formData = new FormData();
          formData.append('storeName',this.updateStoreInfo.storeName);
          formData.append('phone',this.updateStoreInfo.phone);
          formData.append('storeIntro',this.updateStoreInfo.storeIntro);
          formData.append('license', this.licenseFile);
          formData.append('permit', this.permitFile);
          axios.post("/meals/store/modifyTheBasicInformationOfTheStore",formData).then(res=>{
            if(res.data.code === 200){
              ElMessage.success(res.data.msg)
              this.editBasicInfoDialogVisible =false;
              this.getStoreInfo();
            }else{
              this.$message.error(res.data.msg)
            }
          })
    },
    submitEditTimeForm() {
      this.$refs.editTimeForm.validate((valid) => {
        if (valid) {
          this.editTimeForm.storeId = JSON.parse(localStorage.getItem("storeId"))
          axios.get("/meals/store/selectOpenTimeByStoreId",{
            params:this.editTimeForm
          }).then(res=>{
            if(res.data.code == 200){
              this.$message.success(res.data.msg)
              this.editTimeDialogVisible = false;
              this.getStoreInfo()
            }else{
              this.$message.error(res.data.msg)
            }
          })
        }
      });
    },
    submitEditAnnouncementForm() {
      this.$refs.editAnnouncementForm.validate((valid) => {
        if (valid) {
          axios.get("/meals/store/updateAfficheByStoreId",{
            params:{
              newAffiche:this.editAnnouncementForm.affiche,
              storeId:JSON.parse(localStorage.getItem("storeId"))
            }
          }).then(res=>{
            if(res.data.code == 200){
              this.$message.success(res.data.msg)
              this.editAnnouncementDialogVisible = false;
              this.getStoreInfo()
            }else{
              this.$message.error(res.data.msg)
            }
          })
        }
      });
    },
    handleLicenseChange(file, fileList) {
      this.licenseFile = file.raw;
      this.licenseFileList = fileList;
    },
    handlePermitChange(file, fileList) {
      this.permitFile = file.raw;
      this.permitFileList = fileList;
    },
    submitLicenseUpload() {
      const formData = new FormData();
      if (this.editLicenseForm.license) {
        formData.append('license', this.editLicenseForm.license);
      }
      axios.post("/meals/store/uploadLicense", formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(res => {
            if (res.data.code === 200) {
              ElMessage.success(res.data.msg);
              this.getStoreInfo();
              this.editLicenseDialogVisible = false;
            } else {
              ElMessage.error(res.data.msg);
            }
          })
          .catch(error => {
            ElMessage.error('上传失败，请重试！');
            console.error(error);
          });
    },
    submitPermitUpload() {
      const formData = new FormData();
      if (this.editLicenseForm.permit) {
        formData.append('permit', this.editLicenseForm.permit);
      }
      axios.post("/meals/store/uploadPermit", formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(res => {
            if (res.data.code === 200) {
              ElMessage.success(res.data.msg);
              this.getStoreInfo();
              this.editLicenseDialogVisible = false;
            } else {
              ElMessage.error(res.data.msg);
            }
          })
          .catch(error => {
            ElMessage.error('上传失败，请重试！');
            console.error(error);
          });
    },
    handleClose(done) {
      ElMessageBox.confirm('确定关闭此对话框吗？')
          .then(() => {
            done();
          })
          .catch(() => {
            // catch error
          });
    }
  },
  created() {
    this.getStoreInfo();
  }
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
}

.info-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-item {
  margin-bottom: 1rem;
}

.info-item label {
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: #555;
}

.info-item span {
  display: inline-block;
  color: #495057;
}

.info-item p {
  margin: 0;
  color: #495057;
}

.mt-4 {
  margin-top: 1.5rem;
}

.text-center {
  text-align: center;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  padding: 0 10px;
}

.el-image {
  margin-top: 5px;
  cursor: pointer;
}

.el-button {
  margin-top: 10px;
  width: 100%;
}

.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.upload-demo .el-button {
  margin-top: 10px;
}
</style>